<template>
  <div class='treeview row'>
    <ul class="col" v-for="root in treenodes" role='tree'>
      <li class='parent open' role='treeitem'>
        <span title='展开/折叠' @click.stop="toggle"><i :class='root.icon'></i> {{root.name}}</span>
        <children v-if="root.children.length" :parent="root" :checked="checked"></children>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'treeview',
    props: ['treenodes', 'checked'],
    methods: {
      toggle: (e) => e.target.parentNode.classList.toggle('open')
    },
    components: {
      children: {
        name: 'children',
        props: ['parent', 'checked'],
        template: `<ul class='group' role="group">
                    <li class="parent" v-if="child.children.length" v-for="child in parent.children">
                      <span title='展开/折叠' @click.stop="toggle"><i :class='child.icon'></i> {{child.name}}</span>
                      <children v-if="child.children.length" :parent="child" :checked="checked"></children>
                    </li>
                    <li v-else>
                      <span>
                        <label class="md-checkbox">
                          <input type="checkbox" :value="child.id" :checked="checked.includes(child.id)">
                          <i class="bg-primary"></i> <em :class='child.icon'></em> {{child.name}}
                        </label>
                      </span>
                    </li>
                   </ul>`,
        methods: {
          toggle: (e) => e.target.parentNode.classList.toggle('open')
        }
      }
    }
  }
</script>

<style>
  .treeview { min-height: 20px; border-radius: 4px }
  .treeview ul[role='tree'] { min-width: 15rem }
  .treeview li { list-style-type: none; padding: 5px; position: relative }
  .treeview ul ul { padding-left: 34px; padding-top: 10px }
  .treeview ul ul li:hover { background: rgba(0, 0, 0, .015) }
  .treeview li:after, .treeview li:before { content: ''; left: -16px; position: absolute; right: auto }
  .treeview > ul > li:after, .treeview > ul > li:before { border: 0 }
  .treeview li:before {
    -webkit-transition: border-color 0.1s ease 0.1s;
    transition: border-color 0.1s ease 0.1s;
    border-left: 1px solid #999;
    height: 100%;
    bottom: 50px;
    top: -10px;
    width: 1px
  }
  .treeview li:after { border-top: 1px solid #999; height: 20px; top: 20px; width: 22px }
  .treeview li:last-child::before { height: 30px }
  .treeview li span {
    -webkit-transition: color, border-color, background-color .2s ease;
    transition: color, border-color, background-color .2s ease;
    display: inline-block;
    border: 1px dotted #999;
    border-radius: 3px;
    padding: 3px 8px;
  }
  .treeview li span > i { min-width: 18px; text-align: center }
  .treeview li.parent > ul { display: none }
  .treeview li.parent.open > ul { display: block }
  .treeview li.parent > span { cursor: pointer }
  .treeview li.parent > span:before {
    font-family: FontAwesome;
    content: '\F055';
    display: inline-block;
    text-align: center;
    padding: 0 7px 0 3px;
  }
  .treeview li.parent.open > span:before { content: '\f056' }
  .treeview li.parent > span:hover,
  .treeview li.parent > span:hover + ul li span { background: #eee; border: 1px solid #94a0b4; color: #000 }
  .treeview li.parent > span:hover { background-color: #DF8505; border: 1px solid #C67605; color: #fff }
  .treeview li.parent > span:hover + ul li::before { border-left-color: #F89406 }
  .treeview li.parent > span:hover + ul li::after { border-top-color: #F89406 }
  .treeview li.parent > span:hover + ul li span { background: #FDDFB3 !important; border: 1px solid #FAA937; color: #000 }
</style>